<!-- 投诉 -->
<template>
   <div class="yw-order-container yw-order-suggestion">
      <van-nav-bar title="投诉" left-text="" left-arrow class="icon-return" @click-left="$router.back(-1)">
        <van-icon name="search" slot="right" @click="clickfilterEevent()" id="van-icon-search"/>
      </van-nav-bar>
      <van-cell-group>
          <van-cell is-link class="color-6">
            <span><span class="color-default font-3 font-w7">*</span> <span class="font-28">投诉原因</span></span>
            <span class="fr">陪玩师转单</span>
          </van-cell>
      </van-cell-group>
      <div class="in pb0">
        <p class="title color-6 font-28">投诉说明</p>
        <p class="desc position-r"><textarea v-model="content" class="color-9" placeholder="请描述具体投诉情况，有助于投诉快速处理" @keyup="contentCheck()"></textarea><span>{{count}}/200</span></p>
      </div>
      <div class="in uploadFile">
        <p class="title color-6 font-28">上传凭证</p>
        <span v-if="imgShow==true">
          <img class="img" :src="$imgPath(val)" v-for="(val,index) in imgs" :key="index">      
        </span>                
        <div class="uploadDiv" v-if="uploadShow">
          <van-icon name="photograph" id="van-icon-photograph"/>
            <p class="color-9 font-14">最多三张</p>
          <input type="file" class="file-box" accept="image/gif,image/jpeg,image/jpg,image/png" ref="avatarInput1" @change="complainImg($event)">
        </div>
      </div>
      <!-- btn -->
      <div class="suggest btn-f00 btn-success" @click="complain()">提交</div>
   </div>
</template>
<script>
  import { Toast } from 'vant'
  import apiHttp from '../../api/index'
  import { Rate } from 'vant'
  import { Stepper } from 'vant'
  export default {
  data() {
    return {
      orderId:this.$route.params.orderId,
      content:"",  //投诉内容
      count:0,     //投诉内容字符数
      fileIds:[],
      imgs:[],
      imgShow:false,
      uploadShow:true
    }
  },
  components:{

  },
  methods: {
    //上传投诉图片
    complainImg(event){
        let fd = new FormData()
        fd.append('model','system/complain')
        if (this.$refs.avatarInput1.files.length !== 0) {
            fd.append('file', this.$refs.avatarInput1.files[0])
        }
        apiHttp.apiCenter.uploadImg(fd,resp=>{
            if(resp.code == 200){
                this.imgs.push(resp.data.url);
                this.fileIds.push(resp.data.fileId) 
                this.imgShow = true;               
                if(this.imgs.length==3){
                   this.uploadShow = false;
                   Toast("最多只能选三张")
                }                                
            }else{
                Toast(resp.message)
            }                               
           
        })
    },
    //投诉内容验证
    contentCheck(){
      this.count = this.content.length;
      if(this.count>=200){
        this.content = this.$str(this.content,0,200);
      }        
    },   
    //调用投诉接口
    complain(){       
        let params = {
          orderId:this.orderId,
          content:this.content,
          fileIds:this.fileIds
        }            
        apiHttp.orderIndex.complainOrder(params,resp=>{            
            if(resp.code==200){  
                 Toast("投诉成功！"); 
                 this.$router.back(-1);     
            }else{
              Toast(resp.message);
            }                                             
        })
    },
    //
    clickfilterEevent() {
      this.filter = true
    },
    //图片上传
    onRead(file) {
      //console.log(file)
    }
  }
};
</script>
<style scoped>
.img{
    width: 3rem;
    height: 3rem;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    bottom: 0.4rem;
}
.uploadDiv{
  min-width: 25%;
  text-align: center;
  background: #eee;
  padding: 0.8rem 0;
  position: relative;
  display: inline-block;
}
#van-icon-photograph{
   width: 0.85rem;
  height: 0.7rem;;
}
.file-box{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    border: none;
    background-color: transparent;
    z-index: 99;
    opacity: 0;
}
#van-icon-search{
  width:1.3rem;
  height:1.3rem; 
} 
.uploadFile .van-uploader {
  min-width: 25%;
  text-align: center;
  background: #eee;
  padding: 0.4rem 0;
}
.uploadFile .van-icon {
  width: 0.54rem;
  height: 0.45rem;
  background: url('../../assets/image/order/icon_upload@2x.png') no-repeat center center;
  background-size: cover;
}
.uploadFile .van-icon-photograph::before {
    content: none;
}
.in p.title {
  padding: 0.4rem 0 0.6rem 0;
}
.in .desc span {
  position: absolute;
  bottom: 0.2rem;
  right: 3%;
  color: #999;
}
.in .desc textarea {
    width: 94%;
    min-height: 6rem;
    border: 0;
    resize: none;
    background: #eee;
    border-radius: 0.1rem;
    padding: 0.2rem 3%;
}
.in {
  padding: 0.2rem 0.6rem;
}
.suggest {
  position: fixed;
  bottom: 0.8rem;
  left: 0.5rem;
  right: 0.5rem;
  padding: 0.4rem;
  font-size: 0.7rem;
}
.van-cell {
  border-bottom: 0.01rem solid rgb(233, 231, 231);
}
.icon-return {
  background: 0;
}
</style>